<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="bill-list">
			<view class="item" @click="current=index" :class="{
				active: index == current
			}" v-for="(item, index) in list">
				<template v-if="item.billType == 1">
					<view class="name">
						发票类型：普通发票（个人）
					</view>	
					<view class="text">
						姓名：{{item.name}}
					</view>
					<view class="text">
						邮箱：{{item.email}}
					</view>
				</template>
				<template v-else>
					<view class="name">
						发票类型：普通发票（单位）
					</view>	
					<view class="text">
						单位名称：{{item.name}}
					</view>
					<view class="text">
						纳税人识别号：{{item.taxpayerNumber}}
					</view>
					<view class="text">
						邮箱：{{item.email}}
					</view>
				</template>
				
				<view class="icons" v-if="current == index">
					<u-icon name="checkbox-mark" color="#fff"></u-icon>
				</view>	
			</view>
		</view>	
		
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" @click="submit" shape="circle" :custom-style="btnStyle">确认选择</u-button>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
			showDelivery:false,
			form:{},
			btnStyle:this.$config.btnStyle,
			typeList:[{
				label: '普通发票(个人)',
				name:1,
			},{
				label: '普通发票(单位)',
				name:2,
			}],
			billType: 1,
			list:[],
			current:null,
        };
    },
    onLoad(o) {
		that = this;
		let list = o.type == 1 ? uni.getStorageSync('billingList1') : uni.getStorageSync('billingList2') || []
		console.log(list);
		this.list = list;
		this.current = list.findIndex(item=>item.id==o.id)
    },
    onReady() {
        // this.$refs.uForm.setRules(this.rules);
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		submit(){
			uni.$emit('selectBill', this.list[this.current]);
			this.$common.goback();
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}
.bill-list{
	padding: 30rpx 32rpx;
	.item{
		background: #fff;
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px 20px;
		border: 2px solid #fff;
		overflow: hidden;
		position: relative;
		.icons{
			position: absolute;
			right: 0;
			padding: 2px 5px;
			background: $color;
			bottom: 0;
			display: none;
		}
		&.active{
			.icons{
				display: block;
			}
			border-color: $color;
		}
	}
	.name{
		font-size: 14px;
		margin-bottom: 6px;
		font-weight: bold;
	}
	.text{
		margin-bottom: 6px;
	}
}
</style>
